<template>
	<view class="content">
		<!-- 导航栏 -->
		<view class="header-navi">
			<!-- 占位 -->
			<!-- <view class="status_bar"></view> -->
			<!-- 标题 -->
			<!-- <view class="navi-title">
				<image class="title-img" src="../../static/index/title.png"></image>
			</view> -->
			<nav-bar backState="2000" bgColor="#00A08E">
				<view slot="left" class="img-slot">
					<image class="title-img" src="../../static/index/title.png"></image>
				</view>
			</nav-bar>
			<!-- 分类搜索消息 -->
			<view style="padding: 10rpx 0; display: flex;align-items: center;">
				<view class="navi-search">
					<view class="btn-box" @click="swithTo">
						<image class="size-btn" src="../../static/index/fenlei.png"></image>
						<view class="img-name">分类</view>
					</view>
					<view class="input-view">
						<image class="search-img" src="../../static/index/search.png" mode=""></image>
						<input value="" class="input" type="text" placeholder="输入搜索关键词" placeholder-style="color:#999;font-size:22rpx;" @click="navSearch">
						<image class="search-camera" src="../../static/index/camera.png" mode=""></image>
						<view class="search-btn" @click="navSearch">搜索</view>
					</view>
					<view class="btn-box">
						<image class="msg-btn" src="../../static/index/msg.png" mode=""></image>
						<view class="img-name">消息</view>
					</view>
				</view>
			</view>
			<!-- tab栏 -->
			<view class="utabBar">
				<view class="tablist">
					<!-- tab组件 -->
					<scroll-view id="nav-bar" class="nav-bar" scroll-x scroll-with-animation :scroll-left="scrollLeft">
						<view class="nav-item" :class="{activedTab:tabBarId==0}" @click="changeTabPage(0)">首页</view>
						<view 
							class="nav-item" 
							:class="{activedTab:tabBarId==item.id}"
							v-for="item in tabBarList" 
							:key="item.id" 
							@click="changeTabPage(item.id)"
						>{{item.name}}</view>
					</scroll-view>
				</view>
				<!-- 下拉菜单按钮 -->
				<!-- <view class="tab-btn">
					<image src="../../static/index/xiangxia@3x.png" mode=""></image>
				</view> -->
			</view>
		</view>
			<scroll-view 
				scroll-y="true" 
				class="panel-scroll-box" 
				@scrolltolower="refresh()" 
				style="height: 100%;"
				:scroll-top="pageSeat"	
				:scroll-with-animation="true"	
			>
				<view class="content-center" :style="{'padding-top':contentTall+'px'}">
					<!-- 轮播图 -->
					<u-swipper :swiperlist="SwiperTopList" v-if="!tabBarId"></u-swipper>
					<!-- 按钮 -->
					<btn-box :list="btnBoxList" v-if="!tabBarId"></btn-box>
					<!-- 头条区域 -->
					<head-news :headNewsList="headNewsList" ></head-news>
					<!-- 秒杀 -->
					<u-Seckill  :advList="advList" v-if="!tabBarId"></u-Seckill>
					<!-- 团购特惠 -->
					<team-shop v-if="false"></team-shop>
					<!-- 砍价专区 -->
					<price-down v-if="false"></price-down>
					<!-- 热销单品 -->
					<goods-list :goodsList="homeGoodsList"></goods-list>
					<uni-load-more :status="loadMoreStatus"></uni-load-more>
				</view>
			</scroll-view>
	</view>
</template>

<script>
	// import uTab from '@/components/u-tab/u-tab.vue'
	import uSwipper from '@/components/u-swipper/u-swipper.vue'
	import btnBox from '@/components/btn-box/btn-box.vue'
	import headNews from '@/components/head-news/head-news.vue'
	import uSeckill from '@/components/u-Seckill/u-Seckill.vue'
	import teamShop from '@/components/team-shop/team-shop.vue'
	import priceDown from '@/components/price-down/price-down.vue'
	import goodsList from '@/components/goods-list/goods-list.vue'
	import {
		getBtnBoxInfo,
		getSwiperInfo,
		getHomeGoodsList,
		} from '../../api/index/index.js'
	import {getTabBarType} from '../../api/home.js'
	export default {
		components:{
			// uTab,
			uSwipper,
			btnBox,
			headNews,
			uSeckill,
			teamShop,
			priceDown,
			goodsList,
			},
		data() {
			return {
				contentTall:0,
				btnBoxList:[],
				SwiperTopList:[],
				headNewsList:[],
				homeGoodsList:[],
				homeGoodsListPage:1,
				tabBarList:[],
				advList:[],
				tabBarId:0,
				loadMoreStatus:'loading',
				headNewsAllList:[],
				pageSeat:-1,
			}
		},
		onLoad(options) {
			this.getHeadNaviHeight()
			this.getSwiperInfo()
			this.getBtnBoxInfo()
			this.getHomeGoodsList(this.homeGoodsListPage,this.tabBarId)
			this.getTabBar()
			//重新打开页面时，重置商品列表page数
			this.homeGoodsListPage=1
		},
		mounted() {
			// this.getHeadNaviHeight()
			// console.log(this.$refs.tall)
			
		},
		methods: {
			//获取导航栏高度，给content-center设置padding-top
			getHeadNaviHeight(){
				const query = uni.createSelectorQuery().in(this);
				query.select('.header-navi').boundingClientRect(data=>{
					this.contentTall = data.height
				}).exec()
			},
			//获取flex btn 
			async getBtnBoxInfo(){
				const {data:res}=await getBtnBoxInfo()
				this.btnBoxList = res
			},
			//获取轮播图数据
			async getSwiperInfo(){
				const res = await getSwiperInfo()
				this.advList = res.extra.topAct
				res.data.forEach(item=>{
					if(item.type==0){
						this.SwiperTopList.push(item)
					}
				})
			},
			//获取底部商品列表
			async getHomeGoodsList(page,id){
				const {data:res}=await getHomeGoodsList(page,id)
				if(page==1){
					this.homeGoodsList=res
				}else{
					this.homeGoodsList=this.homeGoodsList.concat(res)
				}
				this.homeGoodsListPage++
			},
			getTabBar(){
				//获取tab栏
				//获取今日头条btn
				getTabBarType().then(res=>{
					this.tabBarList = res.data
					this.headNewsAllList = res.extra.home
					this.headNewsList = res.extra.home
				})
			},
			refresh(){
				this.getHomeGoodsList(this.homeGoodsListPage,this.tabBarId)
			},
			swithTo(){
				uni.switchTab({
					url:'/pages/category/category'
				})
			},
			//搜索
			navSearch(){
				uni.navigateTo({
					url:'/pages/search/search'
				})
			},
			//改变tab栏
			changeTabPage(id){
				this.pageSeat = 0
				this.$nextTick(function(){
					this.pageSeat = -1
				})
				if(this.tabBarId==id){
					return
				}
				this.tabBarId=id
				this.headNewsList = []
				this.homeGoodsListPage = 1
				this.refresh()
				this.tabBarList.forEach(item=>{
					if(item.id==id){
						this.headNewsList = item.children
					}
					if(id==0){
						this.headNewsList = this.headNewsAllList
					}
				})
			}
		},
		name: 'index',
		computed: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		height:100vh;
		position: relative;
	}
	.header-navi{
		position: fixed;
		z-index: 1000;
		top: 0;
		left: 0;
		right: 0;
		background-color: #00A08E;
		.img-slot{
			margin-left: 294rpx;
		}
		.title-img{
				  width: 162rpx;
				  height: 41rpx;
				  }
		// .status_bar {
		//       height: var(--status-bar-height);
		//       width: 100%;
		// 	  }
		// .navi-title{
		// 	  display: flex;
		// 	  justify-content: center;
		// 	  align-items: center;
		// 	  height: 62rpx;
		// 	  }
		.navi-search{
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 0 29rpx;
			// margin-top: 26rpx;
			height: 59rpx;
			.btn-box{
				width: 40rpx;
				font-size: 18rpx;
				color: #fff;
				line-height: 0.8;
				.size-btn, .msg-btn{
					width: 40rpx;
					height: 40rpx;
				}
				.img-name{
					width: 100%;
					font-size: 18rpx;
					text-align: center;
					margin-top: 3rpx;
					width: 100%;
					font-weight:500;
					line-height: 0.8;
				}
				
			}
			.input-view{
				width: 543rpx;
				border: 1rpx solid #28d4ba;
				border-radius: 18px;
				display: flex;
				justify-content: space-between;
				box-shadow: inset 0 0 0 2rpx #28d4ba;
				align-items: center;
				background-color: #fff;
				.search-img{
					width: 26rpx;
					height: 26rpx;
					margin:0 17rpx;
				}
				.search-camera{
					width: 38rpx;
					height: 32rpx;
					margin:0 19rpx;
				}
				.input{
					height: 54rpx;
				}
				.search-btn{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 121rpx;
					text-align: center;
					height: 100%;
					background-color: #28d4ba;
					border-radius: 15px;
					// line-height: 68rpx;
					font-size: 30rpx;
					color: #fff;
				}
			}
		}
		.utabBar{
			display: flex;
		}
		.tablist{
			position: relative;
			width: 100%;
		}
		.tab-btn{
			// padding: 15rpx;
			height: 90rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			// position: absolute;
			// right: 0;
			// top: 3rpx;
			background-color: #00A08E;
			image{
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
	.content-center{
		background-color:#f7f7f7!important;
		// padding-top: 287rpx;
		
	}
	// .contentTail{
	// 	margin-top:this.
	// }
	/* 顶部tabbar */
	.nav-bar{
		position: relative;
		z-index: 10;
		height: 90rpx;
		white-space: nowrap;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,.06);
		background-color: #00A08E;
		.nav-item{
			display: inline-block;
			width: 150rpx;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			font-size: 26rpx;
			color: #fff;
			position: relative;
			&:after{
				content: '';
				width: 0;
				height: 0;
				border-bottom: 4rpx solid #007aff;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				transition: .3s;
			}
		}
		.activedTab{
			color: #FFEB2E;
			font-size: 15px;
		}	
		.current{
			color: #007aff;
			&:after{
				width: 50%;
			}
		}
	}
	.swiper-box{
		height: 100%;
		// padding-bottom: 120rpx;
	}
	// .panel-scroll-box{
	// 	height: 100%;
		
		// .panel-item{
		// 	background: #fff;
		// 	padding: 30px 0;
		// 	border-bottom: 2px solid #000;
		// }
	// }
</style>

